<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i> 秒杀列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-button type="primary" round @click="urlAdd"><i class="el-icon-plus"> </i>&nbsp;&nbsp;设置秒杀活动</el-button>
            <div style="height:40px"></div>
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
              <el-tab-pane :label="item.start_time+'至'+item.end_time" :name="''+item.id"  v-for="item in list" :key="item.id"></el-tab-pane>
            </el-tabs>
                <el-table :data="tableData"  style="width: 100%"   ref="multipleTable">
                    <el-table-column prop="goods_id" label="ID" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="goods_name" label="商品名称"  align="center">
                    </el-table-column>
                    <el-table-column prop="original_price" label="原价" width="160" align="center">
                    </el-table-column>
                    <el-table-column prop="price" label="优惠价" width="160" align="center">
                    </el-table-column>
                    <el-table-column prop="total_stock" label="总库存"  width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="selled_stock" label="已卖数量" width="120" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="120" align="center" >
                        <template slot-scope="scope" >
                            <el-button size="small" type="text" @click="handleSet(scope.$index, scope.row)" >设置销量</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" v-show="totalPages>1">
                    <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                    </el-pagination>
                </div>
        </div>
        <!-- 设置秒杀销量提示框 -->
        <el-dialog title="设置秒杀商品销量" :visible.sync="setVisible"  center >
            <el-form style="width:800px; margin:0 auto"  label-width="110px">
                <el-form-item label="商品名称：">
                    <el-input style="width:500px;"  type="textarea"  v-model="goodsName"  :disabled="true" ></el-input>
                </el-form-item>
                <el-form-item label="商品原销量：">
                    <el-input style="width:500px;"  v-model="goodsSales"  :disabled="true" ></el-input>
                </el-form-item>
                <el-form-item label="商品销量：">
                    <el-input style="width:500px;" type="number" v-model="selledStock" min="0"  placeholder="请输入商品销量" ></el-input>
                </el-form-item>
            </el-form>      
            <div slot="footer" class="dialog-footer">
                <el-button @click="onCancel">取 消</el-button>
                <el-button type="primary" @click="onCommit">确 定</el-button>
          </div>
            
        </el-dialog>
        <!-- / 设置秒杀销量提示框 -->
        
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">是否确定下架？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
        <!-- / 删除提示框 -->
    </div>
</template>
<script>
import { getSeckillList,postSetSales} from "@/api/goods/goods";
export default {
  name: "goods",
  data() {
    return {
      activeName2:'1',
      pageIndex: 1, //当前页码
      pageSize: 10, //每页10条
      totalElements: 1, //默认的总条数
      totalPages: 1, //默认的总页数
      tableData: [], //表格数据
      list:[],//所以数据
      delIndex: 0, //当前选中的下标
      delId: 0, //当前要删除的Id
      delVisible: false, //默认dialog 不弹出
      title: "", //商品标题
      setVisible:false,//秒杀提示
      setId:0,//设置销量商品id
      selledStock:'',//商品销量
      goodsName:'',//商品名称
      goodsSales:'',//商品销量
    };
  },
  //实例创建
  created() {
    //
    this.getDate();
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    handleClick(tab, event) {
      // console.log(tab.name);
      
        var index = parseInt(tab.index);
        var array = this.list[index];
        // console.log(array)
        this.tableData = array.goodsList;
      
    },
    //获取数据
    getDate() {
      getSeckillList().then(response => {
        console.log(response)
        if (response.code == 200) {
          var data = response.data; //当前返回的数据
          var array = data[0];
          this.tableData = array.goodsList; //列表数据  默认第一
          this.list  =data; //所有的秒杀时间
        } else {
          this.$notify.error({
            title: "异常",
            offset: 100,
            message: response.msg
          });
        }
      });
    },
    //把状态改中文
    format(row){
        let value=row.state; //状态：0上架、1下架
        if(value==0){
            return '上架'
        }else{
            return '下架'
        }
    },
    //新增商品
    urlAdd() {
      this.$router.push({ path: "/goods/seckill/save" });
    },
    //查询
    onSelect() {
      this.pageIndex = 1;
      this.getDate();
    },
    //重置筛选条件
    onResetting() {
      this.state = "";
      this.userName = "";
      this.title = "";
      this.getDate();
    },
    //分页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getDate();
    },

    //设置秒杀商品销量
    handleSet(index, row){
      console.log(row)
       if (row.goods_id && row.goods_id > 0) {
          this.setVisible = true;
          this.setId = row.goods_id;
          this.goodsName = row.goods_name;
          this.goodsSales = row.selled_stock;
      }
    },
    //确认设置销量
    onCommit(){
      let _this = this;
      let param = {};
      if(this.selledStock==""){
        this.$notify.info({title: '提示',message: '请输入商品销量'});
        return false;
			}else{
        param.goodsId	 = this.setId;
        param.selledStock = this.selledStock;
        postSetSales(param).then(response => {
            if (response.code == 200) {
              this.$message.success("设置成功");
              this.setVisible = false;
              setTimeout(function(){
                  _this.getDate();
              },2000)
            } else {
              this.$notify.error({
                title: "设置失败",
                duration: 2000,
                message: "失败原因：" + response.data.msg
              });
            }
        });
      }
    },
    //取消
    onCancel(){
      this.setVisible = false;
      this.selledStock = '';
    },
    //编辑
    handleEdit(index, row) {
      if (row.id && row.id > 0) {
        //跳转到商品编辑
        this.$router.push({ path: "/goods/edit",query:{goodsId:row.id }});
      }
    },
    //删除
    handleDelete(index, row) {
      // console.log(index,row.id);
      if (row.id && row.id > 0) {
        this.delIndex = index; //要删除的下标
        this.delId = row.id; //要删除的ID
        this.delVisible = true; //显示兑换弹出框
        //console.log(this.delVisible);
      } else {
        // console.log("没触发");
      }
    },
    // 确定删除
    deleteRow() {
      if (this.delId > 0) {
        postGoodDelete(this.delId).then(response => {
          if (response.code == 200) {
            this.tableData.splice(this.delIndex, 1);
            this.$message.success("下架成功");
            this.delVisible = false;
          } else {
            this.$notify.error({
              title: "删除失败",
              duration: 2000,
              message: "失败原因：" + response.data.msg
            });
          }
        });
      }
    }
  },
  filters: {
    state: function (value) {
        // console.log(value);
        // debugger
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
}
};
</script>
<style lang="stylus" scoped>
.edit {
    color: #ff9800;
}

.del {
    color: #e51c23;
}

.download {
    color: #67C23A;
}
</style>


